

<template>
  <div id="app">
    <!--表格用来展示数据-->
    <b>数据列表:</b>

<!--    <el-button type="info" @click="toAdd()" plain>添加角色</el-button>-->
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="messageType"
          label="消息类型"
      >
      </el-table-column>

      <el-table-column
          prop="mobilePush"
          label="推送消息"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="toUpdate(scope.row.id)">编辑内容</el-button>
        </template>
      </el-table-column>

      <el-table-column
          prop="messageSms"
          label="手机短信"
      >
        <template slot-scope="scope">
<!--          <el-checkbox v-model="checked2">是否发送</el-checkbox>-->
          <el-button type="text" @click="toUpdate2(scope.row.id)">编辑内容</el-button>
        </template>
      </el-table-column>

      <el-table-column
          prop="uname"
          label="负责人"
      >
      </el-table-column>

      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="tc(scope.row.id)" size="mini">负责人</el-button>
<!--          <el-button type="text" v-if="scope.row.status==0" @click="statusUpdate(scope.row.id,1)" size="mini">拒绝发送</el-button>-->
<!--          <el-button type="text" v-if="scope.row.status==1" @click="statusUpdate(scope.row.id,0)" size="mini">允许发送</el-button>-->
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页展示数据-->
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 6, 9, 12]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <!--添加弹窗-->
    <el-dialog
        title="编译消息内容"
        :visible.sync="dialogVisible"
        width="30%">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="消息类型:" prop="messageType">
          <el-input v-model="ruleForm.messageType" disabled></el-input>
        </el-form-item>

        <el-form-item label="消息内容:" prop="mobilePush">
          <el-input v-model="ruleForm.mobilePush" type="textarea"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add('ruleForm')" v-text="ruleForm.id==null?'添加':'修改'"></el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
        title="编译消息内容"
        :visible.sync="dialogVisible3"
        width="30%">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="消息类型:" prop="messageType">
          <el-input v-model="ruleForm.messageType" disabled></el-input>
        </el-form-item>

        <el-form-item label="消息内容:" prop="messageSms">
          <el-input v-model="ruleForm.messageSms" type="textarea"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add('ruleForm')" v-text="ruleForm.id==null?'添加':'修改'"></el-button>
          <el-button @click="dialogVisible3=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

<!--    点击弹窗-->
    <el-dialog
        title="查看"
        :visible.sync="dialogVisible2"
        width="80%">

      <el-form :inline="true" :model="formInline" class="demo-form-inline">

        <el-form-item label="用户名：">
          <el-input v-model="formInline.username" placeholder="请输入昵称"></el-input>
        </el-form-item>

        <el-form-item label="手机号码：">
          <el-input v-model="formInline.phone" placeholder="请输入手机号码"></el-input>
        </el-form-item>

        <el-form-item label="用户角色：">
          <el-select v-model="formInline.role" placeholder="请选择用户角色" clearable>
            <el-option label="老板" value="老板"></el-option>
            <el-option label="管理员" value="管理员"></el-option>
            <el-option label="牛马" value="牛马"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="findPage1()">查询</el-button>
          <el-button type="danger" @click="resetForm3()">重置</el-button>
        </el-form-item>

        <el-table
            :data="tableData2"
            border
            style="width: 100%">

          <el-table-column
              prop="id"
              label="序号"
          >
          </el-table-column>

          <el-table-column
              prop="username"
              label="用户名"
          >
          </el-table-column>

          <el-table-column
              prop="name"
              label="姓名"
          >
          </el-table-column>

          <el-table-column
              prop="phone"
              label="手机号码"
          >
          </el-table-column>

          <el-table-column
              prop="did"
              label="部门"
          >
          </el-table-column>

          <el-table-column
              prop="rid"
              label="角色"
          >
            <template slot-scope="scope">
              {{scope.row.rid==1?"老板":scope.row.rid==2?"管理员":"牛马"}}
            </template>
          </el-table-column>

          <el-table-column
              prop="time"
              label="创建时间"
          >
          </el-table-column>

          <el-table-column
              prop="state"
              label="状态"
          >
            <template slot-scope="scope">
              {{scope.row.state==1?"启用":"禁用"}}
            </template>
          </el-table-column>

          <el-table-column
              prop="caId"
              label="是否选择"
          >
            <template slot-scope="scope">
              {{scope.row.caId==0?"已选择":"未选择"}}
            </template>
          </el-table-column>

<!--          <el-table-column-->
<!--              label="操作"-->
<!--          >-->
<!--            <template slot-scope="scope">-->
<!--              <el-button type="text" v-if="scope.row.caId==0" @click="statusUpdate2(scope.row.id,1)" size="mini">取消选择</el-button>-->
<!--              <el-button type="text" v-if="scope.row.caId==1" @click="statusUpdate2(scope.row.id,0)" size="mini">选择</el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->




        </el-table>
      </el-form>

    </el-dialog>

  </div>
</template>

<style >

</style>

<script>
// @ is an alias to /src
import axios from "axios"

export default {
  data(){
    return{
      /*
        data:就是用来定义数据的要用什么就自己定义什么
        []:数组，集合
        {}:对象(里面有属性)
         */
      tableData:[],
      tableData2:[],
      pageNum:1,
      pageSize:100,
      total:0,
      formInline:{},
      user:{},
      roomList:[],
      dialogVisible:false,
      dialogVisible2:false,
      dialogVisible3:false,
      ruleForm:{},
      ruleForm2:{},
      imageUrl:"",
      inputMs:"",
      checked:false,
      checked2:false,
    }
  },
  methods:{
    /*！！！！！！！！！！！
    methods:这个里面定义的全部都是方法
    现在是spring boot+vue 框架
    不一样的就是在 从vue框架里面的methods里面
    通过方法去请求路径(请求的路径就是后台的路径)
    拿到数据放到下面的created()里面来加载数据才能在页面展示

    ***html使用ajxa 请求controller  controller把数据返回给前端 不再去跳转页面了***

     */
    // statusUpdate(id,status){
    //   this.axios.get(`http://localhost:9006/message/statusUpdate?id=${id}&status=${status}`).then(res=>{
    //     if (res.data.code==200){
    //       this.$message.success("修改成功");
    //     }else{
    //       this.$message.error("修改失败");
    //     }
    //     this.findPage();
    //   })
    // },
    statusUpdate2(id,caId){
      this.axios.get(`http://localhost:9006/message/statusUpdate2?id=${id}&caId=${caId}`).then(res=>{
        if (res.data.code==200){
          this.$message.success("修改成功");
        }else{
          this.$message.error("修改失败");
        }
        this.findPage1();
      })
    },
    findPage1(){
      this.axios.post(`http://localhost:9006/message/findPage1?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,this.formInline).then(res=>{
        console.log(res.data);
        this.tableData2=res.data.data.records;
        this.total=res.data.data.total;
        if (this.pageNum>res.data.data.pages){
          this.pageNum=res.data.data.pages;
          this.findPage();
        }
      })
    },
    findPage(){ //查询所有加分页参数
      this.axios.post(`http://localhost:9006/message/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,this.formInline).then(res=>{
        console.log(res.data);
        this.tableData=res.data.data.records;
        this.total=res.data.data.total;
        if (this.pageNum>res.data.data.pages){
          this.pageNum=res.data.data.pages;
          this.findPage();
        }
      })
    },
    handleCurrentChange(val) {//分页方法
      this.pageNum=val;
      this.findPage();
      this.findPage1();
    },
    // toAdd(){ //往添加对话框里清空数据
    //   this.dialogVisible=true;
    //   this.ruleForm={};
    // },

    add(formName) { //添加方法
      this.$refs[formName].validate((valid) => {
        if (valid) {//满足校验
          //通过ajax把数据保存到后端
            axios.post(`http://localhost:9006/message/add`,this.ruleForm).then(res=>{
              if (res.data.code==200){
                this.$message.success("保存成功");
                this.dialogVisible=false;
                this.dialogVisible3=false;
              }else{
                this.$message.error("保存失败");
              }
              this.dialogVisible=false;
              this.dialogVisible3=false;
              this.findPage();
            })
        } else {//不满足校验
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() { //重置按钮点击可以重置
      this.dialogVisible=false;
    },
    resetForm2(){
      this.dialogVisible3=false;
    },
    toUpdate(id){ //修改回显数据方法
      axios.get(`http://localhost:9006/message/findById?id=${id}`).then(res=>{
        this.ruleForm=res.data.data;
        this.dialogVisible=true;
      })
    },
    toUpdate2(id){ //修改回显数据方法
      axios.get(`http://localhost:9006/message/findById?id=${id}`).then(res=>{
        this.ruleForm=res.data.data;
        this.dialogVisible3=true;
      })
    },
    // del(id){ //删除方法
    //   this.$confirm("确定要删除吗?一旦删除,该条信息将不能恢复。", '删除确认', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     axios.get(`http://localhost:9006/message/deleteById?id=${id}`).then(res=>{
    //       if (res.data.code==200){
    //         this.$message.success("删除成功");
    //       }else{
    //         this.$message.error("删除失败！");
    //       }
    //       this.findPage();
    //     })
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     });
    //   });
    // },//删除方法

    tc(id){
       this.axios.get(`http://localhost:9006/message/chios?id=${id}`).then(res=>{
         this.tableData2 = res.data.data
         this.dialogVisible2=true;
       })
    },
    resetForm3(){
      this.formInline={};
    }
  },
  created(){
    /*
    ！！！！！！！！！！注意created()：
    这个里面才是可以把数据展示到页面的方法
    思考那个方法是要把数据放到前台 就在这个里面写那个方法
     */
    // var userDB=sessionStorage.getItem("userDB"); //从login.html页面的session域中拿到的数据
    // if (userDB==null){
    //   location.href="#/login";
    // }
    // this.user=JSON.parse(userDB);//动态获取显示登录人的数据 因为从session域中拿出来所以要转换数据类型
    this.findPage();//展示所有的数据
    this.findPage1();
    // this.xialaList();//动态获取下拉框的数据
  }
}
</script>
